<template>
	<div class="border-1px border-#E5E6EB border-solid rounded-12px p-20px">
		<p class="text-20px text-#000000 mb-20px font-bold">总资产(USDT）</p>
		<div class="flex items-center">
			<p class="text-32px text-#000000 mb-20px font-bold mr-10px">0.00</p>
			<el-select v-model="value" popper-class="person-select-coin-popper" placeholder="Select" style="width: 80px">
				<el-option v-for="item in options" :key="item.value" :label="item.value" :value="item.value" />
			</el-select>
		</div>
	</div>
</template>
<script lang="ts" setup>

const options = ref([
	{
		value: 'BTC'
	},
	{
		value: 'ETH'
	},
	{
		value: 'USDT'
	},
	{
		value: 'UTR'
	},
	{
		value: 'USD',
	}
]);

const value = ref('BTC');
</script>
<style lang="scss" scoped>
::v-deep .el-select__wrapper {
	border: none;
	box-shadow: none;
	padding: 0 10px;
}
</style>
<style lang="scss">
.person-select-coin-popper {
	padding: 0 !important;
	width: 190px;

	ul {
		padding: 0;

		li {
			padding: 10px 20px;
			;
			height: 50px;

			>div {
				display: flex;
				align-items: center;
				justify-content: space-between;

				>div {
					display: flex;
					align-items: center;

					>span {
						margin-left: 10px;
					}
				}

				>img {
					width: 20px;
					height: 20px;
				}
			}
		}
	}

	.el-popper__arrow {
		display: none;
	}
}</style>
